<template>
  <div class="settings-page">
    <van-nav-bar
      title="设置"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <div class="settings-section">
      <div class="section-title">个人设置</div>
      <div class="settings-list">
        <div class="settings-item" @click="navigateTo('/settings/profile')">
          <van-icon name="user-o" class="settings-icon" />
          <span class="settings-name">个人资料</span>
          <van-icon name="arrow" class="settings-arrow" />
        </div>
        <div class="settings-item" @click="navigateTo('/settings/account')">
          <van-icon name="setting-o" class="settings-icon" />
          <span class="settings-name">账号安全</span>
          <van-icon name="arrow" class="settings-arrow" />
        </div>
        <div class="settings-item" @click="navigateTo('/settings/privacy')">
          <van-icon name="eye-o" class="settings-icon" />
          <span class="settings-name">隐私设置</span>
          <van-icon name="arrow" class="settings-arrow" />
        </div>
      </div>
    </div>
    
    <div class="settings-section">
      <div class="section-title">应用设置</div>
      <div class="settings-list">
        <div class="settings-item" @click="navigateTo('/settings/theme')">
          <van-icon name="brush-o" class="settings-icon" />
          <span class="settings-name">主题设置</span>
          <van-icon name="arrow" class="settings-arrow" />
        </div>
        <div class="settings-item" @click="navigateTo('/settings/notification')">
          <van-icon name="bell" class="settings-icon" />
          <span class="settings-name">通知设置</span>
          <van-icon name="arrow" class="settings-arrow" />
        </div>
        <div class="settings-item" @click="navigateTo('/settings/language')">
          <van-icon name="translate-o" class="settings-icon" />
          <span class="settings-name">语言设置</span>
          <van-icon name="arrow" class="settings-arrow" />
        </div>
        <div class="settings-item" @click="clearCache">
          <van-icon name="delete" class="settings-icon" />
          <span class="settings-name">清除缓存</span>
          <van-icon name="arrow" class="settings-arrow" />
        </div>
      </div>
    </div>
    
    <div class="settings-section">
      <div class="section-title">关于</div>
      <div class="settings-list">
        <div class="settings-item" @click="navigateTo('/settings/about')">
          <van-icon name="info-o" class="settings-icon" />
          <span class="settings-name">关于我们</span>
          <van-icon name="arrow" class="settings-arrow" />
        </div>
        <div class="settings-item" @click="navigateTo('/settings/feedback')">
          <van-icon name="comment-o" class="settings-icon" />
          <span class="settings-name">意见反馈</span>
          <van-icon name="arrow" class="settings-arrow" />
        </div>
        <div class="settings-item" @click="checkUpdate">
          <van-icon name="upgrade" class="settings-icon" />
          <span class="settings-name">检查更新</span>
          <span class="settings-value">v1.0.0</span>
          <van-icon name="arrow" class="settings-arrow" />
        </div>
      </div>
    </div>
    
    <div class="logout-button" v-if="isLoggedIn">
      <van-button block type="danger" @click="handleLogout">退出登录</van-button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'
import { useUserStore } from '../../store/user'

const router = useRouter()
const userStore = useUserStore()
const isLoggedIn = computed(() => userStore.isLoggedIn)

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 导航到指定页面
const navigateTo = (path) => {
  if ((path.includes('/settings/profile') || path.includes('/settings/account') || path.includes('/settings/privacy')) && !isLoggedIn.value) {
    showToast('请先登录')
    return
  }
  router.push(path)
}

// 清除缓存
const clearCache = () => {
  showDialog({
    title: '清除缓存',
    message: '确定要清除应用缓存吗？',
    showCancelButton: true
  }).then(() => {
    // 实际项目中应该调用清除缓存的API
    setTimeout(() => {
      showToast('缓存已清除')
    }, 1000)
  }).catch(() => {
    // 取消操作
  })
}

// 检查更新
const checkUpdate = () => {
  showToast('正在检查更新...')
  
  // 实际项目中应该调用检查更新的API
  setTimeout(() => {
    showToast('当前已是最新版本')
  }, 1500)
}

// 退出登录
const handleLogout = () => {
  showDialog({
    title: '退出登录',
    message: '确定要退出登录吗？',
    showCancelButton: true
  }).then(() => {
    userStore.logout()
    showToast('已退出登录')
    router.push('/')
  }).catch(() => {
    // 取消操作
  })
}
</script>

<style lang="scss" scoped>
.settings-page {
  min-height: 100vh;
  background-color: var(--background-color);
  padding-bottom: calc(var(--tabbar-height) + 20px);
  
  .settings-section {
    margin-top: 12px;
    background-color: var(--background-color-light);
    
    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: var(--text-color);
      padding: 16px 16px 8px;
    }
    
    .settings-list {
      .settings-item {
        display: flex;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid var(--border-color-light);
        
        &:last-child {
          border-bottom: none;
        }
        
        .settings-icon {
          color: var(--primary-color);
          font-size: 20px;
          margin-right: 12px;
        }
        
        .settings-name {
          flex: 1;
          font-size: 16px;
          color: var(--text-color);
        }
        
        .settings-value {
          font-size: 14px;
          color: var(--text-color-tertiary);
          margin-right: 8px;
        }
        
        .settings-arrow {
          color: var(--text-color-tertiary);
        }
      }
    }
  }
  
  .logout-button {
    margin: 24px 16px;
  }
}
</style> 